import { workOrderReplay } from "@/services/workOrder";
import { Button, Form, Icon, Input, message, Modal, Upload,InputNumber } from "antd";
import React from "react";
import { formatMessage } from 'umi-plugin-react/locale';

class ReplayModal extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      visible:false,
      id:null,
      fileList:[],
      solutionDuration: 0.5
    }
  }

  handleDurationChange = val => {
      this.setState({ solutionDuration: val || 0 });
  }

  componentDidMount(){
    if(this.props.onRef){
      this.props.onRef(this)
    }
  }

  initData = id => {
    this.setState({id,visible:true})
  }

  doCancel = () => {
    this.props.form.resetFields()
    this.setState({
      visible:false,
      id:null,
      fileList:[]
    })
  }

  validateForm = () => {
    this.props.form.validateFields((error,values) => {
      if(!error){
        this.doOk(values)
      }
    })
  }

  doOk = async values => {
    const { fileList } = this.state;
    const formData = new FormData()
    for(const item of fileList){
      formData.append('files',item);
    }
    
    formData.append('replyContent',values.content);
    formData.append('ticketId',this.props.detail.id);
    formData.append('solutionDuration',values.solutionDuration);
    formData.append('applicationId',this.props.detail.applicationId);
    if (values.durationAdjustReason){
      formData.append("durationAdjustReason",  values.durationAdjustReason);
    }
// console.log(formData.values(),values);
    const res = await workOrderReplay(formData)
    message.info('操作成功')
    this.doCancel()
    if(this.props.replayOk){
      this.props.replayOk()
    }
  }

  customRequest = info => {
    let { fileList } = this.state;
    fileList.push(info.file)
    console.log(fileList);
    
    this.setState({fileList})
  }

  previewFile = item =>{
    var blobURL = URL.createObjectURL(item);
    window.open(blobURL,'_blank');
  }

  deleteFile = item => {
    let { fileList } = this.state;
    fileList = fileList.filter(file => file.uid != item.uid)
    this.setState({fileList})
  }

  render(){
    const { visible,fileList } = this.state;
    const { form:{getFieldDecorator} } = this.props;
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 4 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 20 },
      },
    };

    const isReasonRequired = (this.state.solutionDuration || 0) < 0;

    return (
      <Form {...formItemLayout} className="workOrderReplayForm">
        <Form.Item label={formatMessage({ id: 'workOrderProcessing.replayModal.replyContent' })} >
          {getFieldDecorator("content",{rules:[{required:true,message:formatMessage({ id: 'workOrderProcessing.replayModal.contentRequired' })}]})(
            <Input.TextArea autoSize={{minRows:5,maxRows:10}} />
          )}
        </Form.Item>
        <Form.Item label={formatMessage({ id: 'workOrderProcessing.replayModal.selectFile' })}>
          <Upload 
            name="file"
            action=''
            customRequest={this.customRequest}
            showUploadList={false}
          >
            <Button>{formatMessage({ id: 'workOrderProcessing.replayModal.uploadFile' })}</Button>
          </Upload>
          <div style={{width:'100%',marginTop:10}}>
            {
              fileList.map(item => {
                return (
                  <div key={item.uid} style={{display:"flex",alignItems:"center",justifyContent:"space-between",marginBottom:10}}>
                    <span title={item.name} onClick={() => this.previewFile(item)} style={{color:"#3e5bff",cursor:"pointer"}}>{item.name}</span>
                    <Icon type="delete" style={{cursor:"pointer",flexShrink:0}} onClick={() => this.deleteFile(item)} />
                  </div>
                )
              })
            }
          </div>
        </Form.Item>
        <Form.Item label={formatMessage({ id: 'workOrderProcessing.replayModal.processingHours' })} className="labelLong">
            {
              getFieldDecorator('solutionDuration',{initialValue:this.state.solutionDuration,rules:[{required:true,message:formatMessage({ id: 'workOrderProcessing.replayModal.hoursRequired' })}],onChange:this.handleDurationChange})(
                <InputNumber min={-99} precision={1} step={0.5}  onChange={this.handleDurationChange} />
              )
            }
          </Form.Item>
        <Form.Item label={formatMessage({ id: 'workOrderProcessing.replayModal.durationAdjustReason' })} className="labelLong">
          {getFieldDecorator("durationAdjustReason",{rules:[{required: isReasonRequired,message:formatMessage({ id: 'workOrderProcessing.replayModal.pleaseInputReason' })}]})(
              <Input.TextArea autoSize={{minRows:5,maxRows:10}} />
          )}
        </Form.Item>
        <div style={{textAlign:"right"}}>
          <Button type="primary" onClick={this.validateForm}>{formatMessage({ id: 'workOrderProcessing.replayModal.confirmReply' })}</Button>
        </div>
      </Form>
    )
  }
}

export default Form.create()(ReplayModal)